<!DOCTYPE html>
<html>
<head>
<?php include_once VIEWS.'inc/head.php'; ?>
<?php
	echo static_file('web/css/swiper-3.3.1.min.css');
	echo static_file('web/js/swiper-3.3.1.min.js');;
	echo static_file('web/css/flexslider.css');
	echo static_file('web/js/jquery.flexslider-min.js');
	echo static_file('web/js/jquery.lazyload.min.js');
?>
<style>
	header{
		border-bottom:1px solid #e1e1e1;
	}
	.pro_list:last-child{
		padding-bottom:0 !important;
	}
</style>
</head>

<body>
	<div class="main">
		<?php include_once VIEWS.'inc/header.php'; ?>
		<section class="hot">
			<div class="pro_list">
				<div class="text_box w1440">
					<div class="title wow fadeInUp">
						<div class="cn">厨房净水</div>
						<div class="en">Kitchen water purification</div>
					</div>
					<div class="ds wow fadeInUp" data-wow-delay="0.2s">我们提供的不仅仅是净水，更是一种健康的生活方式。</div>
					<a href="<?php echo site_url('hwliving/list'); ?>" class="more wow fadeInUp" data-wow-delay="0.4s">
						<span class="txt">了解产品</span>
						<img src="<?php echo static_file('web/img/hot_btnr.png')?>" alt="">
					</a>
				</div>

				<div class="flexslider wow fadeInUp">
					<ul class="slides">
						<li>
							<a href="<?php echo site_url('hwliving/list'); ?>">
								<img src="<?php echo static_file('web/img/jimg.jpg')?>" >
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="pro_list">
				<div class="text_box w1440">
					<div class="title wow fadeInUp">
						<div class="cn">客厅净水</div>
						<div class="en">Living room water purification</div>
					</div>
					<div class="ds wow fadeInUp" data-wow-delay="0.2s">我们提供的不仅仅是净水，更是一种健康的生活方式。</div>
					<a href="<?php echo site_url('hwliving/list'); ?>" class="more wow fadeInUp" data-wow-delay="0.4s">
						<span class="txt">了解产品</span>
						<img src="<?php echo static_file('web/img/hot_btnr.png')?>" alt="">
					</a>
				</div>

				<div class="flexslider wow fadeInUp flexslider2">
					<ul class="slides">
						<li>
							<a href="<?php echo site_url('hwliving/list'); ?>">
								<img src="<?php echo static_file('web/img/jimg2.jpg')?>" >
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="pro_list">
				<div class="text_box w1440">
					<div class="title wow fadeInUp">
						<div class="cn">水联网系统</div>
						<div class="en">Water Networking System</div>
					</div>
					<div class="ds wow fadeInUp" data-wow-delay="0.2s">我们提供的不仅仅是净水，更是一种健康的生活方式。</div>
					<a href="<?php echo site_url('hwliving/list'); ?>" class="more wow fadeInUp" data-wow-delay="0.4s">
						<span class="txt">了解产品</span>
						<img src="<?php echo static_file('web/img/hot_btnr.png')?>" alt="">
					</a>
				</div>

				<div class="flexslider wow fadeInUp flexslider2">
					<ul class="slides">
						<li>
							<a href="<?php echo site_url('hwliving/list'); ?>">
								<img src="<?php echo static_file('web/img/jimg3.jpg')?>" >
							</a>
						</li>
					</ul>
				</div>
			</div>
		</section>
    	<?php include_once VIEWS.'inc/footer.php'; ?>
	</div>
	<script>
		$(function(){
			$('header .bocweb-nav ul li').eq(2).addClass('active');
			$(".flexslider").flexslider({
				animation: "fade",
				animationLoop: true,
				slideshow: true,
				slideshowSpeed: 5000,
				touch:true,
				pauseOnHover:true,
			});


			var ww=$(window).width()-($(window).width()-$('.solution_box').width())/2;
			$('.solution_list').width(ww);
			$('.solution_list ul li').width(ww*0.2787);
			$('.solution_list ul li').css('margin-right',ww*0.0161);
			var oliWidth=ww*(0.2787+0.0161);
			var len=$('.solution_list ul li').length;
			$('.solution_list ul').width(len*oliWidth+2);

			$('.btn .btn_l').click(function(){
				$('.solution_list ul').stop(true,true).animate({
					'left':-oliWidth
				},function(){
					$('.solution_list ul li').eq(0).appendTo($('.solution_list ul'));
					$('.solution_list ul').css('left',0)
				})
			})

			$('.btn .btn_r').click(function(){
				$('.solution_list ul li:last').prependTo($('.solution_list ul'));
				$('.solution_list ul').css('left',-oliWidth);
				$('.solution_list ul').stop(true,false).animate({
					'left':0
				})
			})




			var mySwiper = new Swiper ('.solution_swiper .swiper-container', {
			    nextButton: '.solution_swiper .swiper_btnr',
			    prevButton: '.solution_swiper .swiper_btnl',
			    slidesPerView : 3,
				spaceBetween : 20,
				breakpoints: { 
				    750: {
				      slidesPerView:2,
				      spaceBetween: 20
				    },
			    	 500: {
				      slidesPerView:1,
				      spaceBetween: 20
				    }
				    
				 }
			})

			$('.solution_list ul li .pic').height(Math.floor($('.solution_list ul li .pic').width()*(260/466)));
			$('.solution_swiper .swiper-slide .pic').height(Math.floor($('.solution_swiper .swiper-slide .pic').width()*(260/466)));

			$(window).resize(function(){
				ww=$(window).width()-($(window).width()-$('.solution_box').width())/2;
				$('.solution_list').width(ww);
				$('.solution_list ul li').width(ww*0.2787);
				$('.solution_list ul li').css('margin-right',ww*0.0161);
				oliWidth=ww*(0.2787+0.0161);
				len=$('.solution_list ul li').length;
				$('.solution_list ul').width(len*oliWidth+2);


				$('.solution_list ul li .pic').height(Math.floor($('.solution_list ul li .pic').width()*(260/466)));
				$('.solution_swiper .swiper-slide .pic').height(Math.floor($('.solution_swiper .swiper-slide .pic').width()*(260/466)));
			})
		})
	</script>
</body>
</html>

